<template lang="pug">
  section.home-box
    div.mbx
      span.ml24 我的学习
      //- div(@click="$router.push('/educational/curriculum')")
      div
        span 更多学习
        img(src="@/assets/right.png")
    div.comoonCarousel
        el-row(:gutter="20")
          el-col(:span="6" v-for="item in rowFilter(myCourse, 4)" :key="item.id")
            .mediaBox
              .media
                img(:src="item.cover")
                span(v-if="item.type === 'video'")
                  i(class="el-icon-caret-right")
              .detail
                el-tooltip(effect="dark" :content="item.title" placement="bottom")
                  h3 {{item.title}}
                p
                  span
                    img.mr5(class="el-icon-time" src="@/assets/baoming.png")
                    | {{item.visitorCount||0}}人已报名
                footer
                  el-row(type="flex" justify="space-between" align="middle")
                    el-col(:span="12" class="lecturer")
                      div
                        img.mr5(class="el-icon-time" src="@/assets/tiem.png")
                        span 开课时间：{{item.liveStartAt | dateFilter('YYYY/MM/DD HH:mm:ss')}}
                    div.gradientBtn2(v-show="item.liveStatus === 2 || item.liveStatus === 3" @click="playFun(item)" ) {{item.liveStatus===2 ? '进入直播':'直播回放'}}
</template>
<script>
import AvatarGroup from '@/components/Basic/AvatarGroup'
import { getDocList } from '@/views/teachers/training/live/api'
export default {
  components: {
    AvatarGroup
  },
  data () {
    return {
      loading: false,
      myCourse: []
    }
  },
  created () {
    this.getLiveData()
  },
  methods: {
    rowFilter (val, size = 4) {
      console.log(1111111111111111, val.slice(0, size))
      return val.slice(0, size)
    },

    // 直播课程
    getLiveData () {
      this.loading = true
      const prams = {
        pageNum: 0,
        pageSize: 4
      }
      getDocList(prams).then(res => {
        this.loading = false
        this.myCourse = res.content
      }).finally(() => {
        this.loading = false
      })
    },

    playFun (item) {
      window.open(item.liveDetailUrl)
      // const prams = {
      //   alias: alias
      // }
      // playurlRequest(prams).then(res => {
      //   window.open(res)
      // }).finally(() => {
      //   this.loading = false
      // })
    }
  }
}
</script>
<style lang="scss" scoped>
.comoonCarousel {
  background-color: #fff;
  padding: 24px;
  border-radius: 8px;
}

.mediaBox {
  .media {
    position: relative;
    height: 230px;

    >img {
      width: 100%;
      height: 100%;
    }

    >span {
      position: absolute;
      display: inline-block;
      width: 60px;
      height: 60px;
      line-height: 84px;
      text-align: center;
      left: 50%;
      top: 50%;
      border-radius: 30px;
      margin-top: -30px;
      margin-left: -30px;
      background: rgba(0, 0, 0, 0.7);
      text-align: center;

      i {
        color: #fff;
        font-size: 40px;
      }
    }
  }

  .detail {
    padding: 16px 12px;
    border: 1px solid #EBEBEE;

    h3 {
      font-family: Source Han Sans SC, Source Han Sans SC;
      font-weight: 400;
      font-size: 18px;
      color: #000000;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-top: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 8px
    }

    p {
      font-family: Source Han Sans SC, Source Han Sans SC;
      font-weight: 400;
      font-size: 14px;
      color: #77778C;
      text-align: left;
      font-style: normal;
      text-transform: none;

      span {
        display: flex;
        align-items: center;
      }
    }
  }

  footer {
    margin-top: 10px;

    .gradientBtn2 {
      width: 80px;
      height: 32px;
      background-color: #FF8B00 !important;
      border-radius: 4px;
      font-family: Source Han Sans SC, Source Han Sans SC;
      font-weight: 400;
      font-size: 14px;
      color: #FFF;
      line-height: 32px;
      text-align: center;
      font-style: normal;
      text-transform: none;
      cursor: pointer;
    }
  }

  .lecturer {
    div {
      display: flex;
      align-items: center;
      font-family: Source Han Sans SC, Source Han Sans SC;
      font-weight: 400;
      font-size: 14px;
      color: #FF8B00;
      text-align: left;
      font-style: normal;
      text-transform: none;
      line-height: 0;
    }
  }
}
</style>
